<template>
  <fd-vuex :store="store">
    <div v-if="!dialog.visible">
      <fd-search  :columns="searchColumns" :data="searchData" @event="searchEvent"  style="float: right;"/>
      <fd-table :columns="tableColumns" :data="tableData" :page="tablePage" :config="tableConfig" @event="tableEvent" />
    </div> 
    <div v-else>
        <fd-form :columns="formColumns" :data="formData" ref="form" @submit="formSubmit" @event="formEvent" :config="{labelWidth: '140px'}"/>
    </div>
    <div v-if="mapVisible" style="width: 100%; height: 100%; backgroundColor: white; zIndex: 10; position: absolute; top: 0; left: 0;">
      <a-map :position="position" :positionName="positionName" @submit="sumbit" @cancel="mapVisible = false"/> 
    </div>
  </fd-vuex>
</template>

<script> 
  import AMap from './Map'
  import { mapGetters } from 'vuex'
  import { insert, select, options, del } from '@/api/kaoqin'
  var pageParams = {page: {pageNo: 1, pageSize: 15}}
  export default {
    components: {
      AMap
    },
    computed: {
      ...mapGetters([
        'currentProject' 
      ])
    }, 
    data() {
      return {
        position: [121.220983, 31.287887],
        positionName: '',
        mapVisible: false,
        store: {
          showDeletes: false,
          edit: true
        }, 
        searchColumns: [ 
          { type: 'button-primary', prop: 'addtion', value: '新增' } 
        ],
        searchData: {},
        tableColumns: [
          { type: 'span', prop: 'ruleName', label: '考勤规则'},
          { type: 'span', prop: 'positionName', label: '地点名称'},
          { type: 'span', prop: 'positionRange', label: '范围/米'}, 
          { type: 'span', prop: 'workStartTime', label: '上班时间'},
          { type: 'span', prop: 'workEndTime', label: '下班时间'},
          { label: '操作', render({ data }) {
            return [
              { type: 'button-text', prop: 'edit', value: '编辑', icon: 'el-icon-edit' },
              { type: 'button-text', prop: 'delete', value: '删除', style: 'color: red', load: ({ store }) => !store.showDeletes }
            ]}
          }
        ],
        tableData: [],
        tableConfig: {},
        tablePage: {
          pageSize: 15,
          pageNo: 1,
          total: 55
        },
        formColumns: [
          { type: 'select', prop: 'workDepartmentRuleId',  label: '考勤规则',  options: (resolve) => {
            options().then(res => {
              resolve(res.data)
            })
          }, rule: 'must' },
          { type: 'button', prop: 'positionName', value: '请选择', label: '地点名称', rule: 'must' },
          { type: 'counter', prop: 'positionRange', rule: 'must', label: '范围/米'},
          { type: 'date-time' , prop: 'workStartTime', rule: 'must', label: '上班时间' },
          { type: 'date-time' , prop: 'workEndTime', rule: 'must', label: '下班时间' },
          [
            { type: 'button-primary', prop: '$submit', value: '提交', load:({store}) => store.edit },
            { type: 'button', prop: 'cancel', value: '取消', load:({store}) => store.edit },
            { type: 'formitem' }
          ]
        ],
        formData: {positionRange: 100, calcStartDay: 1, calcEndTime: 30},
        dialog: {
          title: '',
          visible: false
        }  
	    }		
    }, 
    mounted() {  
      this.loadData()
    },
    methods: {
      loadData() {
        select(pageParams).then(res => { 
          console.log(res.data.data)
          this.tableData = res.data.data
          this.tablePage = res.data.page
        })
      },
      searchEvent(params) {
        if (params.prop == 'addtion') {
          this.showDialog('添加', true) 
          this.formData = {positionRange: 100, workStartTime: '', workEndTime: '', positionName: '请选择', workDepartmentRuleId: ''} 
        } 
      },
      formEvent(params) {
        if (params.prop == 'positionName') {
          this.mapVisible = true
        } else if (params.prop == 'cancel') {
          this.dialog.visible = false
        }
      },
      formSubmit(data) { 
        insert({...data, projectId: this.currentProject.projectId, companyId: this.currentProject.companyId}).then(res => {
          this.loadData()
        })  
        this.dialog.visible = false
      },
      showDialog(title, edit) {
        this.store.edit = edit
        this.dialog.title = title
        this.dialog.visible = true
      },
      tableEvent(params) {
        if (params.prop == '$selection') {
          this.store.showDeletes = params.row.length ? true : false
          this.selectData = params.row
        } else if (params.prop == 'edit') { 
          this.position = [params.row.positionLongitude, params.row.positionLatitude]
          this.positionName = params.row.positionName
          this.showDialog('修改', true) 
          this.formData = params.row 
        } else if (params.prop == 'delete') {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            del(params.row).then(res => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.loadData()
            })
          })
        } else if (['$pageNo', '$pageSize'].includes(params.prop)){
          alert(JSON.stringify(params))
        }
      },
      sumbit(info) { 
        this.formData = {
          ...this.formData,
          ...info
        }
        this.mapVisible = false
      } 
    }
} 
</script>
 